import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="angular-app">
      <header class="app-header">
        <h1>Angular 子应用</h1>
        <p>当前路由: {{ currentRoute }}</p>
      </header>
      
      <nav class="app-nav">
        <a routerLink="/" (click)="updateRoute('/')">首页</a>
        <a routerLink="/page1" (click)="updateRoute('/page1')">Page 1</a>
        <a routerLink="/page2" (click)="updateRoute('/page2')">Page 2</a>
        <a routerLink="/page3" (click)="updateRoute('/page3')">Page 3</a>
      </nav>
      
      <div class="app-content">
        <router-outlet></router-outlet>
      </div>
    </div>
  `
})
export class AppComponent {
  currentRoute = '/';
  
  updateRoute(route: string) {
    this.currentRoute = route;
  }
}